<template >
	<div class="contain-report">
		<div class="report-title">操作日志</div>
		<div class="report-search">
			<el-select placeholder="请选择班级" v-model="form.classId" style="width: 300px;margin-right: 20px" @change="getLogLost" clearable @close="form.classId = null">
				<el-option v-for="item in classList" :key="item.id" :label="item.className" :value="item.id"></el-option>
			</el-select>
			<el-select placeholder="请选择实验室" v-model="form.laboratoryId" style="width: 300px;margin-right: 20px" @change="getLogLost" clearable @close="form.laboratoryId = null">
				<el-option v-for="item in laboratoryList" :key="item.id" :label="item.laboratoryName" :value="item.id"></el-option>
			</el-select>
			<el-input style="width: 300px"
					  placeholder="请输入"
					  v-model="form.name"
					  clearable
					  @clear="getLogLost"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px;cursor: pointer" @click="getLogLost"></i>
			</el-input>
		</div>
		<div class="report-search-day">
			<p :style="form.day === 0 ? 'color: #009cd2' : '' " @click="changeDay(0)">全部</p>
			<p :style="form.day === 1 ? 'color: #009cd2' : '' "  @click="changeDay(1)">今日</p>
			<p :style="form.day === 2 ? 'color: #009cd2' : '' "  @click="changeDay(2)">本周</p>
			<p :style="form.day === 3 ? 'color: #009cd2' : '' "  @click="changeDay(3)">本月</p>
			<p style="margin-right: 20px" :style="form.day === 4 ? 'color: #009cd2' : '' "  @click="changeDay(4)">全年</p>
			<el-date-picker
					v-model="time"
					@change="changeDate"
					clearable
					size="small"
					style="width: 300px;margin-right: 10px"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd" >
			</el-date-picker>
		</div>
		<div class="report-table">
			<el-table
					:data="tableData"
					style="width: 100%">
				<el-table-column label="操作时间" align="center" prop="createTime">
				</el-table-column>
				<el-table-column label="操作人"  align="center" prop="userName">
				</el-table-column>
				<el-table-column label="实验室"  align="center" >
					<template slot-scope="scope">{{scope.row.laboratoryName? scope.row.laboratoryName : '未分配实验室'}}</template>
				</el-table-column>
				<el-table-column label="班级"  align="center" >
					<template slot-scope="scope">{{scope.row.className? scope.row.className : '未分配班级'}}</template>
				</el-table-column>
				<el-table-column label="操作内容"  align="center" prop="message" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作"  align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="deleteById(scope.row.id)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</div>
</template >

<script >
    import {deleteNotice, laboratoryList} from "../../api/notice";
    import {allClass} from "../../api/class";
	import {logList,deleteLog } from "../../api/log";

    export default {
        name: "log",
		data(){
            return{
                form:{
                    classId: null,
                    day: 0,
                    endTime: "",
                    laboratoryId: null,
                    name: "",
                    pageIndex: 1,
                    pageSize: 5,
                    startTime: ""
				},
                time:null,
                classList:[],
                laboratoryList:[],
				tableData:[],
				total:null
			}
		},
		mounted() {
            this.getClassList()
            this.getLaboratoryList()
			this.getLogLost()
        },
        methods:{
            async getLaboratoryList(){
                const { data } = await laboratoryList()
                if (data.code === 200){
                    this.laboratoryList = data.data
                }
            },
            async getClassList(){
                const { data } = await allClass()
                console.log(data)
                if (data.code === 200){
                    this.classList = data.data.data
                }
            },
            changeDay(val){
                this.form.day = val
                this.getLogLost()
            },
            changeDate(val){
                if (val){
                    this.form.startTime = val[0]
                    this.form.endTime = val[1]
                }else {
                    this.form.startTime = ''
                    this.form.endTime = ''
                }

                this.getLogLost()
            },
            async getLogLost(){
                const { data } = await logList(this.form)
				if (data.code === 200){
				    this.tableData = data.data.data
					this.total = data.data.total
				}
			},
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getLogLost()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getLogLost()
            },
            deleteById(id){
                this.$confirm('此操作将永久删除该操作日志, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteLog(id).then(res=> {
                        if (res.data.code === 200){
                            this.$message.success(res.data.message)
                            this.getLogLost()
                        }
                    })
                }).catch(() => {
                    this.$message.warning('已取消删除')
                });
            },
		}
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 22px;
			color: #333;
		}
		.report-search{
			width: 100%;
			margin: 30px 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-search-day{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			p{
				margin: 0 10px;
				box-sizing: border-box;
				&:hover{
					cursor: pointer;
				}
			}
		}
		.report-table{
			width: 100%;
			margin: 20px 0;
			box-sizing: border-box;
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
